<template>
  <view class="index">
    <view v-for="(item, index) in roomList" :key="index">
      <view class="item" @click="goChatDetail(item.roomId,item.nickName,item.tinyUserId)" @longpress="longpress(item.roomId)" @touchend="touchend">
        <view class="item-left">
          <u-image width="80rpx" height="80rpx" :src="item.wxAvatar" v-if="item.wxAvatar" shape="circle"></u-image>
          <u-image width="80rpx" height="80rpx" src="/static/img/avatar.png" shape="circle" v-else></u-image>
          <u-badge :isDot="true" v-if="item.isRead==0"></u-badge>
          <view class="info">
            <text style="font-size: 30rpx;font-weight:700">{{ item.tinyUserId==0?'系统通知':item.nickName }}</text>
            <text class="date">{{item.lastContent}}</text>
          </view>
        </view>
        <view class="date">{{item.date}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getByKeyApi,
  getUnReadApi,
  getRoomListApi,
  removeRoomApi,
  getMsgListApi,
} from "@/sheep/api/index";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      tabbarName: "two",
      islongPress: false, //长按记录变量
      titleHeight: 0,
      customTop: 0,
      timer: null,
      roomList: [],
      dot: false,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    onShowAll() {
      this.getList();
    },
    /** 延时器时间 */
    async getSetTimeNumber() {
      let res = await getByKeyApi("chat");
      let setTimeNumber = res.data[0].remark;
      let that = this;
      this.timer = setInterval(() => {
        that.getList();
      }, setTimeNumber);
    },
    async getList() {
      let res = await getRoomListApi();
      this.roomList = res.data;
    },
    goChatDetail(roomId, nickName, tinyUserId) {
      if (this.islongPress == false) {
        uni.navigateTo({
          url: `/pages/chat/chatDetail?roomId=${roomId}&nickName=${nickName}&tinyUserId=${tinyUserId}`,
        });
      } else if (this.islongPress == true) {
      }
    },
    /** 长按 */
    longpress(roomId) {
      this.islongPress = true;
      //弹出确认框
      uni.showModal({
        title: "提示",
        content: "是否删除该聊天",
        success: (res) => {
          if (res.confirm) {
            this.handleRemove(roomId);
          }
        },
      });
    },
    touchend() {
      //延时执行为了防止 click() 还未判断 islongPress 的值就被置为 fasle
      setTimeout(() => {
        this.islongPress = false;
      }, 200);
    },
    handleRemove(roomId) {
      removeRoomApi({ roomId: roomId }).then((res) => {
        uni.showToast({
          title: res.msg,
          duration: 1500,
        });
        if (res.code == 200) {
          this.getList();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.index {
  padding: 30rpx 40rpx;
  position: relative;
  z-index: 99;
  .item {
    margin-top: 50rpx;
    display: flex;
    justify-content: space-between;
    .item-left {
      display: flex;
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 20rpx;
      }
    }
    .date {
      color: #999;
      font-size: 24rpx;
    }
  }
}
</style>
